/*
 * @Author: wuqiang
 * @Date: 2023-07-13 18:04:51
 * @LastEditors: wuqiang
 * @LastEditTime: 2023-11-16 02:08:17
 */
import React, { memo, useEffect } from 'react'
import { REPOSOBILITY, RELATIONS } from '@/constants'
import { ic_close } from '@/utils/loadImages'
import { ActionSheet, Switch } from 'antd-mobile'
import '../index.scss'
import arrow from '@/assets/huijun/ic_arrow_right.png'
import { getAge, isValidIdCard } from '@/utils'

const Insureds = (props: any) => {
  const { insureds = {}, index, setInsureds } = props;

  useEffect(() => {
    if (!isValidIdCard(insureds.idNo)) {
      let idx = insureds.accessorys?.findIndex(item => item.code === '101304');
      if (idx > -1) {
        insureds.accessorys.splice(idx, 1);
        setInsureds({[index]: {...insureds, accessorys: [...insureds.accessorys]}})
      }
    } else {
      if ((getAge(insureds.idNo) || 0) > 60) {
        let idx = insureds.accessorys?.findIndex(item => item.code === '101304');
        if (idx > -1) {
          insureds.accessorys.splice(idx, 1);
          setInsureds({[index]: {...insureds, accessorys: [...insureds.accessorys]}})
        }
      } else if ((getAge(insureds.idNo) || 0) > 45 || (getAge(insureds.idNo) || 0) <= 60 ) {
        let idx = insureds.accessorys?.findIndex(item => (item.code === '101304' && item.insuredAmount === 10000000));
        if (idx > -1) {
          insureds.accessorys.splice(idx, 1);
          setInsureds({[index]: {...insureds, accessorys: [...insureds.accessorys]}})
        }
      }
    }
  }, [insureds.idNo])

  const showActionSheet = param => {
    const BUTTONS = Object.keys(RELATIONS)
    ActionSheet.showActionSheetWithOptions(
      {
        options: BUTTONS,
        maskClosable: true
      },
      buttonIndex => {
        setInsureds({
          [index]: {
            ...insureds,
            relation: RELATIONS[BUTTONS[buttonIndex]],
            relationName: BUTTONS[buttonIndex]
          }
        })
      }
    )
  }

  return (
    <div className="form">
      <div className="form_item">
        <label className="form_label">姓名:</label>
        <div className="form_input">
          <input
            value={insureds?.name}
            onChange={e => {
              setInsureds({ [index]: { ...insureds, name: e.target.value?.trim() } })
            }}
            placeholder="请输入被保人姓名"
          />
        </div>
        <div className="form_clear">
          <img
            src={ic_close}
            alt=""
            onClick={() => {
              setInsureds({ [index]: { ...insureds, name: '' } })
            }}
          />
        </div>
      </div>

      <div className="form_item">
        <label className="form_label">身份证号:</label>
        <div className="form_input">
          <input
            value={insureds?.idNo}
            onChange={e => {
              setInsureds({ [index]: { ...insureds, idNo: e.target.value?.trim() } })
            }}
            placeholder="请输入被保人身份证号"
          />
        </div>
        <div className="form_clear">
          <img
            src={ic_close}
            alt=""
            onClick={() => {
              setInsureds({ [index]: { ...insureds, idNo: '' } })
            }}
          />
        </div>
      </div>

      <div className="form_item" onClick={showActionSheet}>
        <label className="form_label">投保人关系:</label>
        <div className="form_input">
          <input readOnly value={insureds?.relationName} placeholder="请选择与投保人的关系" />
        </div>
        <div className="form_arrow">
          <img src={arrow} alt="" />
        </div>
      </div>

      <div className="form_item">
        <label className="form_label">有无社保:</label>
        <div className="form_input" style={{ justifyContent: 'flex-start' }}>
          <label
            className={`is_insured ${insureds.socialInsuFlag === true ? 'active' : ''}`}
            style={{ whiteSpace: 'nowrap', width: '100px' }}
            onClick={() => {
              setInsureds({ [index]: { ...insureds, socialInsuFlag: true } })
            }}>
            有(含新农合)
          </label>
          <label
            className={`is_insured ${insureds.socialInsuFlag === false ? 'active' : ''}`}
            onClick={() => {
              setInsureds({ [index]: { ...insureds, socialInsuFlag: false } })
            }}>
            无
          </label>
        </div>
      </div>

      <div className="form_item" style={{ height: 'auto' }}>
        <label className="form_label" style={{ alignItems: 'flex-start', paddingTop: '20px' }}>
          保险责任:
        </label>
        <div
          className="form_input"
          style={{ justifyContent: 'flex-start', flexWrap: 'wrap', padding: '10px 0' }}>
          <Switch
            checked={!!insureds.accessorys}
            color="#FC8F2B"
            onChange={() => {
              setInsureds({ [index]: { ...insureds, accessorys: insureds.accessorys ? null : [] } })
            }}
          />
          {insureds.accessorys ? (
            <div className="form_options">
              <div className="form_options_item active">恶性肿瘤特药保险金</div>
              {insureds.idNo &&
              isValidIdCard(insureds.idNo) &&
              (getAge(insureds.idNo) || 0) <= 60 ? (
                <>
                  <div className="form_options_item active">重大疾病一次性给付金</div>
                  <div
                    className="form_options_item"
                    style={{ background: 'transparent', border: '0 none' }}>
                    {(getAge(insureds.idNo) || 0) <= 60 && (getAge(insureds.idNo) || 0) >= 0 ? (
                      <div
                        className={`form_option_first ${
                          insureds?.accessorys?.find(
                            item => item.code === '101304' && item.insuredAmount === 5000000
                          )
                            ? 'active'
                            : ''
                        }`}
                        onClick={() => {
                          let idx1 = insureds?.accessorys?.findIndex(
                            item => item.code === '101304' && item.insuredAmount === 5000000
                          )
                          let idx2 = insureds?.accessorys?.findIndex(
                            item => item.code === '101304' && item.insuredAmount === 10000000
                          )
                          if (idx1 > -1) {
                            insureds.accessorys.splice(idx1, 1)
                            setInsureds({
                              [index]: { ...insureds, accessorys: [...insureds.accessorys] }
                            })
                          } else {
                            if (idx2 > -1) {
                              insureds.accessorys.splice(idx2, 1)
                            }
                            insureds.accessorys.push({ code: '101304', insuredAmount: 5000000 })
                            setInsureds({
                              [index]: { ...insureds, accessorys: [...insureds.accessorys] }
                            })
                          }
                        }}>
                        5万
                      </div>
                    ) : null}
                    {(getAge(insureds.idNo) || 0) <= 45 && (getAge(insureds.idNo) || 0) >= 0 ? (
                      <div
                        className={`form_option_second ${
                          insureds?.accessorys?.find(
                            item => item.code === '101304' && item.insuredAmount === 10000000
                          )
                            ? 'active'
                            : ''
                        }`}
                        onClick={() => {
                          let idx1 = insureds?.accessorys?.findIndex(
                            item => item.code === '101304' && item.insuredAmount === 5000000
                          )
                          let idx2 = insureds?.accessorys?.findIndex(
                            item => item.code === '101304' && item.insuredAmount === 10000000
                          )
                          if (idx2 > -1) {
                            insureds.accessorys.splice(idx2, 1)
                            setInsureds({
                              [index]: { ...insureds, accessorys: [...insureds.accessorys] }
                            })
                          } else {
                            if (idx1 > -1) {
                              insureds.accessorys.splice(idx1, 1)
                            }
                            insureds.accessorys.push({ code: '101304', insuredAmount: 10000000 })
                            setInsureds({
                              [index]: { ...insureds, accessorys: [...insureds.accessorys] }
                            })
                          }
                        }}>
                        10万
                      </div>
                    ) : null}
                  </div>
                </>
              ) : null}
              <div
                className={`form_options_item ${
                  insureds?.accessorys?.find(item => item.code === '105544') ? 'active' : ''
                }`}
                key={index}
                onClick={() => {
                  let idx = insureds?.accessorys?.findIndex(item => item.code === '105544')
                  if (idx > -1) {
                    insureds.accessorys.splice(idx, 1)
                    setInsureds({ [index]: { ...insureds, accessorys: [...insureds.accessorys] } })
                  } else {
                    insureds.accessorys.push({ code: '105544', insuredAmount: 100000000 })
                    setInsureds({ [index]: { ...insureds, accessorys: [...insureds.accessorys] } })
                  }
                }}>
                恶性肿瘤特需责任
              </div>
            </div>
          ) : null}
        </div>
      </div>
    </div>
  )
}

export default memo(Insureds)
